<template>
    <div class="messageContainer">
        <div class="messageSetting">
            <div class="messageSettingContent">
                <div class="back" @click="goBack"></div>
                <p class="title">消息设置</p>
                <div class="other"></div>
            </div>
        </div>
        <div class="systemNotice">
            <div class="systemContent">
                <div class="noticeImg"></div>
                <div class="noticeContainer">
                    <p class="noticeTitle">系统通知</p>
                    <p class="noticeContent">我是负责发系统消息的~</p>
                </div>
            </div>
        </div>
        <div class="shieldContainer">
            <div class="shield">
                <div class="shieldInfo">
                    <p class="shieldTitle">屏蔽消息</p>
                    <p class="shieldContent">开启后将不再收到该用户的消息提醒</p>
                </div>
                <van-switch v-model="shieldChecked" size="23px" inactive-color="rgb(229, 229, 229)"/>
            </div>
        </div>
        <div class="blackContainer">
            <div class="black">
                <div class="blackInfo">
                    <p class="blackTitle">加入黑名单</p>
                    <p class="blackContent">不再接收该用户的任何信息</p>
                </div>
                <van-switch v-model="blackChecked" size="23px" inactive-color="rgb(229, 229, 229)"/>
            </div>
        </div>
    </div>
</template>

<script>
    import { Switch } from 'vant'
    export default {
        name:'messageSetting',
        components:{
            'van-switch':Switch
        },
        data(){
            return{
                shieldChecked:false,
                blackChecked:false
            }
        },
        methods:{
            goBack(){
                this.$router.back()
            }
        }
    }
</script>

<style scoped>
    .messageSetting{
        width: 100vw;
        height: 100vh;
        overflow-x: hidden;
        overflow-y: scroll;
        scrollbar-width: none; 
    }
    .messageSetting{
        width: 100%;
        height: 1.76rem;
        background-color: #FFF;
    }
    .messageSettingContent{
        width: 6.86rem;
        height: 1.76rem;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .back{
        background-image: url(../assets/img/6-icon@2x/back.png);
        width: .32rem;
        height: 0.32rem;
        background-position: center;
        background-size: contain;
    }
    .title{
        font-family: 'PingFangSC-Mediuem';
        color:#333333;
        font-size: .36rem;
    }
    .other{
        width: .32rem;
        height: 0.32rem;
    }
    .systemNotice{
        width: 100%;
        background-color: #FFF;
    }
    .systemContent{
        width: 6.86rem;
        margin: 0 auto;
        display: flex;
        align-items: center;
        padding-bottom: .4rem;
    }
    .noticeImg{
        width: .88rem;
        height: .88rem;
        background-image: url(../assets/img/7-icon@2x/7-5systemHead.png);
        background-position: center;
        background-size: contain;
    }
    .noticeContainer{
        margin-left: .2rem;
        display: flex;
        flex-direction: column;
    }
    .noticeTitle{
        font-family: 'PingFangSC-Mediuem';
        color: #333333;
    }
    .noticeContent{
        font-family: 'PingFangSC-Regular';
        color:#999999;
    }
    .shieldContainer,.blackContainer{
        width: 6.86rem;
        height: 70px;
        margin: 0 auto;
        border-radius: .3rem;
        background-color: #FFF;
        margin-top: .3rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .shield,.black{
        width: 90%;
        height: 90%;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .shieldInfo{
        display: flex;
        flex-direction: column;
    }
    .shieldTitle,.blackTitle{
        font-family: 'PingFangSC-Mediuem';
        color: #333333;
    }
    .shieldContent,.blackContent{
        font-family: 'PingFangSC-Regular';
        color:#999999;
    }
</style>